<template>
  <div>
    <UserMb>
      <template slot="title">订单评价</template>
      <template slot="content">
        <div class="OECBOx">
          <template v-for="(v,k) in yuan.spArr">
              <div class="OECSpInfoBOx flex f-s ai-fs" :key="k+'OECSpInfoBOx'">
                  <div class="OECSpImgBox flex">
                      <img class="OECSpImg" :src="v.imgUrl" alt="">
                      <div class="OECSpName">{{v.name}}</div>
                  </div>
                  <div class="OECEvaluateBox">
                      <div class="OECEvaluateNumBox flex f-s">
                          <div class="OECEvaluateNumText flex f-s">商品评分</div>
                          <div class="OECEvaluateNumImgBox flex f-s">
                            <template v-for="(rv,rk) in v.pj.numFalgArr">
                              <div class="OECEvaluateNumImg" :class="{OECEvaluateNumImgOn:rv}" :key="rk + 'numFalgArr' +k" @click="OnPjImg(rk,k)"></div>
                            </template>
                          </div>
                      </div>
                      <div class="OECEvaluateTextBox flex f-s">
                        <div class="OECEvaluateTextHBox flex f-s ai-fs">评价商品</div>
                        <div class="OECEvaluateTextTextBox">
                          <textarea class="OECEvaluateTextTextarea" placeholder="商品评价，最少10个字，最多50个字"></textarea>
                        </div>
                      </div>
                      <div class="OECEvaluateImgBox flex f-s">
                        <div class="OECEvaluateImgText flex f-e ai-fs">晒图片</div>
                        <div class="OECEvaluateImglistBox flex f-s">
                          <img class="OECEvaluateImg" v-for="k in 4" :key="k+'OECEvaluateImg'" src="../../../../assets/zfc/个人中心/账单/添加图片.png" alt=""/>
                        </div>
                      </div>
                  </div>
              </div>
          </template>
        </div>
        <div class="OEBBOx">
          <div class="hr"></div>
          <div class="OEBNumBOx flex">
            <div class="OEBNum1BOx flex f-s">
              <div class="OEBNumTextBOx">服务态度</div>
              <div class="OEBNumImgBOx flex f-s">
                <template v-for="(v,k) in yuan.spPj.fwtd.arr">
                  <div class="OECEvaluateNumImg" :class="{OECEvaluateNumImgOn:v}" :key="k + 'OEBNumImg1Arr'" @click="OnPjfwtd(k)"></div>
                </template>
              </div>
            </div>
            <div class="OEBNum2BOx flex f-s">
              <div class="OEBNumTextBOx">描述相符</div>
              <div class="OEBNumImgBOx flex f-s">
                <template v-for="(v,k) in yuan.spPj.msxf.arr">
                  <div class="OECEvaluateNumImg" :class="{OECEvaluateNumImgOn:v}" :key="k + 'OEBNumImg2Arr'" @click="OnPjmsxf(k)"></div>
                </template>
              </div>
            </div>
          </div>
          <div class="OEBBtnBOx flex">
            <div class="OEBBtn flex">提交评价</div>
          </div>
        </div>
      </template>
    </UserMb>
  </div>
</template>

<script>
import UserMb from "../gj/UserMb";
export default {
  name: "OrderEvaluate",
  data() {
    return {
      yuan: JSON.parse(this.$route.query.yuan),
    };
  },
  methods: {
    OnPjImg(rk,k){
      for (let i = 0; i < this.yuan.spArr[k].pj.numFalgArr.length; i++) {
        this.yuan.spArr[k].pj.numFalgArr[i] = false;
      }
      for (let j = 0; j <=rk; j++) {
        this.$set(this.yuan.spArr[k].pj.numFalgArr,j,true);
      }
      console.log(this.yuan.spArr[k].pj.numFalgArr);
    },
    OnPjfwtd(k){
      for (let i = 0; i < this.yuan.spPj.fwtd.arr.length; i++) {
        this.yuan.spPj.fwtd.arr[i] = false;
      }
      for (let j = 0; j <=k; j++) {
        this.$set(this.yuan.spPj.fwtd.arr,j,true);
      }
    },
    OnPjmsxf(k){
      for (let i = 0; i < this.yuan.spPj.msxf.arr.length; i++) {
        this.yuan.spPj.msxf.arr[i] = false;
      }
      for (let j = 0; j <=k; j++) {
        this.$set(this.yuan.spPj.msxf.arr,j,true);
      }
    }
  },
  components: {
    UserMb,
  },
};
</script>

<style scoped>
* {
  font-size: 0;
  color: #333333;
}
.f-s {
  justify-content: flex-start;
}
.f-e {
  justify-content: flex-end;
}
.fd-c {
  flex-direction: column;
}
.ai-fs {
  align-items: flex-start;
}
.ai-fe {
  align-items: flex-end;
}
.f18 {
  font-size: 18px;
}
.f16 {
  font-size: 16px;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.c3 {
  color: #333333;
}
.c6 {
  color: #666666;
}
.c9 {
  color: #999999;
}
.c25 {
  color: #252525;
}
.c2a {
  color: #2a2a2a;
}
</style>

<style scoped>
.OECBOx{
    width: 1043px;
    margin: 26px auto 0 auto;
}
.OECSpInfoBOx{
    height: 336px;
    margin-bottom: 39px;
    border-bottom: 1px dashed #dedede;
}
.OECSpInfoBOx:nth-last-of-type(1){
  margin-bottom: 0;
  border-bottom: 1px dashed #ffffff;
}
.OECSpImgBox{
    width: 258px;
    height: 258px;
    margin-right: 102px;
    border: 1px solid #e1e1e1;
    position: relative;
}
.OECSpImg{
    width: 100%;
}
.OECSpName{
    width: 100%;
    height: 16px;
    font-size: 16px;
    color: #666666;
    position: absolute;
    bottom: -36px;
    left: 0;
}
.OECEvaluateBox{
    width: 681px;
    position: relative;
}
.OECEvaluateNumBox{
    height: 40px;
    margin-bottom: 20px;
}
.OECEvaluateNumText{
    width: 84px;
    height: 100%;
    font-size: 16px;
    color: #666666;
}
.OECEvaluateNumImgBox{
    height: 100%;
}
.OECEvaluateNumImg{
  width: 19px;
  height: 20px;
  margin-right: 7px;
  background: url("../../../../assets/zfc/个人中心/账单/账单评价星-未选中.png") 0 0/19px 20px no-repeat;
}
.OECEvaluateNumImgOn{
  background: url("../../../../assets/zfc/个人中心/账单/账单评价星-已选中.png") 0 0/19px 20px no-repeat;
}
.OECEvaluateTextBox{
  height: 136px;
  margin-bottom: 30px;
}
.OECEvaluateTextHBox{
  width: 84px;
  height: 100%;
  font-size: 16px;
  color: #666666;
}
.OECEvaluateTextTextBox{
  width: 595px;
  height: 134px;
  border: 1px solid #dedede;
}
.OECEvaluateTextTextarea{
  width: 100%;
  height: 100%;
  line-height: 36px;
  font-size: 14px;
  color: #333333;
  outline: none;
  resize: none;
  text-indent: 10px;
}
.OECEvaluateTextTextarea::placeholder{
  line-height: 36px;
  font-size: 14px;
  color: #999999;
  text-indent: 10px;
}
.OECEvaluateImgBox{
  height: 60px;
}
.OECEvaluateImgText{
  width: 63px;
  height: 100%;
  font-size: 16px;
  color: #666666;
  margin-right: 21px;
}
.OECEvaluateImglistBox{
  height: 100%;
}
.OECEvaluateImg{
  width: 60px;
  height: 60px;
  margin-right: 10px;
}
/* 底部内容 */
.OEBBOx{
  width: 100%;
}
.hr{
  width: 100%;
  border-top: 1px solid #e9e9e9;
  margin-bottom: 50px;
}
.OEBNumBOx{
  width: 100%;
  height: 20px;
  margin-bottom: 61PX;
}
.OEBNum1BOx{
  height: 100%;
  margin-right: 61px;
}
.OEBNum2BOx{
  height: 100%;
}
.OEBNumTextBOx{
  width: 84px;
  height: 100%;
  font-size: 16px;
  color: #666666;
}
.OEBBtnBOx{
  height: 50px;
  margin-bottom: 38px;
}
.OEBBtn{
  width: 150px;
  height: 50px;
  font-size: 20px;
  color: #ffffff;
  background-color: #f08200;
  border-radius: 5px;
  cursor: pointer;
}
</style>
